<template class="cardABox">
    <div class="cardAItem">
        <!-- Card卡片：将信息聚合在卡片容器中展示。 -->
        <!-- Card 组件包括header和body部分，header部分需要有显式具名 slot 分发，同时也是可选的。 -->
        <!-- xx in yy（yy是组件data中的数据）：xx是yy中的每一项-->
        <el-card v-for="elem in filterData" :key="elem.id" class="box-card">  <!--v-for、v-if用来和数据结合实现动态渲染(循环、条件)-->
            <!--card组件封装插槽slot1——head部分-->
            <div slot="header" class="clearfix">
                <span class="head">{{ elem.form.device }}</span>
                <el-button
                    v-if="(role === 0 || role === 1) && elem.form.status == 0"
                    style="float: right; padding: 3px 0;"
                    type="text"
                >
                    <!--快速分配<i class="el-icon-arrow-down"></i>  &lt;!&ndash;下拉菜单&ndash;&gt;-->
                    <el-dropdown @command="handleCommand">
                          <span class="el-dropdown-link">
                            快速分配<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                        <el-dropdown-menu slot="dropdown" trigger="click">
                            <el-dropdown-item v-for="p in maintainers" :command="p.pwd+' '+elem.id">{{
                                    p.name
                                }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-button>

                <el-button
                    v-else-if="role === 2 && elem.form.status == 1"
                    style="float: right; padding: 3px 0;"
                    type="primary"
                    @click="handler(elem.id, elem.hid)">
                    确认接收
                </el-button>
            </div>

            <!--card组件封装插槽slot2——body部分-->
            <div class="text item" @click="jumpTo(elem.id)">
                <div>
                    <strong>Id</strong>：{{ elem.id }}
                </div>
                <div v-for="(item, key, index) in elem.form" :key="index">
                    <strong>{{ key }}</strong> ：{{ item }}
                </div>
                <div>
                    <strong>维修人员</strong>：{{ elem.hid === -1 ? '未分配' : elem.hid }}
                </div>
            </div>

        </el-card>
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Card",

    data() {
        return {
            rawData: [],  //原始数据
            sheetData: [],  //不同角色展示的mine数据
            filterData: [],
            role: null,  // 角色分类 0boss 1leader 2maintainer 3monitor
            maintainers: [],
            value1: null,  //Tabs选择的值
            value2: null,  //Tabs选择的值
            value4: null,  //Tabs选择的值
        }
    },

    methods: {
        //获取工单数据
        getData() {
            //1. 获取原始全部数据
            this.$axios({
                method: 'get',
                url: 'http://47.97.219.99:8018/cloudForm/getAllFormByUid/2020210432',
                //不仅需要申请所有工单数据，还要根据不同的内容过滤数据
            }).then((res) => {
                // console.log('res', res);
                // console.log('res.data', res.data);
                // console.log('res.data.data', this.$qs.parse(res.data.data));  //对象形式
                this.rawData = Object.values(this.$qs.parse(res.data.data));  //坑：res.data才是postman中显示出来的
                // console.log('rawData:\n', this.rawData)
            }).catch((err) => {
                console.log('获取工单数据时错误：' + err);
            })
        },
        filtData() {
            if (this.role === 0 || this.role === 1) this.sheetData = this.rawData;
            else if (this.role === 2) this.sheetData = this.rawData.filter(elem => {
                return elem.hid == Number(sessionStorage.id)
            })
            else this.sheetData = this.rawData.filter(elem => {
                    return elem.form.submitor == Number(sessionStorage.id)
                })
            // console.log("role:\n", this.role, "\nsheetData:\n", this.sheetData)
        },
        filterData0() {  //其他过滤数据
            this.filterData = this.sheetData
            this.filterData = this.filterData.filter(elem => {
                // console.log(this.value2 - 'a')
                // console.log(this.value2.charCodeAt() - 97)
                return Number(elem.form.status) === (this.value2.charCodeAt() - 97)
            });
            this.filterData = this.filterData.filter(elem => {
                return Number(elem.form.type) === (this.value4.charCodeAt() - 120)
            });
        },

        handler(sheetId) {  //维修人员 确认接收
            //更改该工单状态
            var form = {};
            for (var key in this.sheetData)
                // console.log(this.apiData[key])
                if (this.sheetData[key].id === sheetId)  //身份boss或leader，分配工单, 分配之后工单状态++
                    if (this.sheetData[key].form.status === 1) {
                        this.sheetData[key].form.status++
                        form = this.sheetData[key].form
                        // console.log("form", form)
                        break;
                    }
            // 修改远程工单
            this.$axios({
                method: 'put',
                url: `http://47.97.219.99:8018/cloudForm/updateFormById`,
                headers: {'content-type': 'x-www-form-urlencoded'},
                params: {
                    form: JSON.stringify(form),
                    id: sheetId
                }
            })
            //刷新页面
            this.$router.push('/etc')
        },

        //处理快捷分配：将该工单分配给该维修者
        handleCommand(command) {
            // console.log(command)
            const arr = command.split(' ');
            // console.log(arr)
            let maintainId = arr[0];
            let sheetId = arr[1];
            //根据工单Id和维修者Id修改工单的被分配者hid
            this.$axios({
                method: 'put',
                url: `http://47.97.219.99:8018/cloudForm/transferFormById`,
                //不仅需要申请所有工单数据，还要根据不同的内容过滤数据
                headers: {'content-type': 'x-www-form-urlencoded'},
                params: {
                    id: sheetId,
                    hid: maintainId
                }
            })//.then(res => console.log(res))
            //更改该工单状态
            var form = {};
            for (var key in this.sheetData) {
                // console.log(this.apiData[key])
                if (this.sheetData[key].id === sheetId) {  //身份boss或leader，分配工单, 分配之后工单状态++
                    if (this.sheetData[key].form.status === 0) {
                        this.sheetData[key].form.status++
                    } else if (this.sheetData[key].form.status === 1)  //身份维修员，接收工单，接受之后工单状态++
                        this.sheetData[key].form.status++
                    form = this.sheetData[key].form
                    // console.log("form", form)
                    break;
                }
            }
            // 修改远程工单
            this.$axios({
                method: 'put',
                url: `http://47.97.219.99:8018/cloudForm/updateFormById`,
                //不仅需要申请所有工单数据，还要根据不同的内容过滤数据
                headers: {'content-type': 'x-www-form-urlencoded'},
                params: {
                    form: JSON.stringify(form),
                    id: sheetId
                }
            })
            //刷新页面
            this.$router.push('/etc')
        },

        jumpTo(sheetId) {
            // console.log('工单详细跳转！')
            this.$router.push({
                path: '/sheetDetails',
                query: {
                    sheetId
                }
            })
        }
    },
    mounted() {
        this.value1 = this.$route.query.value1;
        this.value2 = this.$route.query.value2;
        this.value4 = this.$route.query.value4;
        this.role = Number(sessionStorage.role)
        this.getData();
        this.maintainers = this.$store.getters.getAllMaintain;
        setTimeout(() => {
            this.filtData()
        }, 300)
        setTimeout(() => {
            this.filterData0()
        }, 600)
    },
}
</script>

<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.item {
    text-align: left;
}
</style>
